import React from 'react'

import "./common.css"


/**
 * props.uneditablePart 不可编辑部分
 * props.editablePart 可编辑部分
 * props.editable 是否可编辑
 * props.onChange 内容改变事件
 * 可编辑的标题
 * @param  props 
 */
export class EditableTitle extends React.Component {

    constructor(props) {
        super(props)

        this.inputText = React.createRef()
    }


    onTextChange = () => {

        if (this.props.onChange !== undefined) {
            this.props.onChange(this.inputText.current.innerHTML)
        }
    }

    render = () => {
        let className = "title-normal"
        if (this.props.editable) {
            className = "title-editable"
        }

        return <span className={className}>
            {this.props.uneditablePart}
            <span
                contentEditable={this.props.editable}
                suppressContentEditableWarning={true}
                ref={this.inputText}
                onInput={this.onTextChange}
                style={{ outline: "none" }}
            >
                {this.props.editablePart}
            </span>
        </span>
    }
}